<template>
  <view>
    <u-form ref="uForm" :model="form" :label-width="labelWidth + 'rpx'" :key="key">
      <view class="box">
        <u-form-item prop="name" required label="姓  名：">
          <u-input v-model="form.name" placeholder="请输入姓名" />
        </u-form-item>
        <u-form-item prop="phonenumber" required label="手机号：" :border-bottom="false">
          <u-input v-model="form.phonenumber" placeholder="请输入手机号" />
        </u-form-item>
        <u-form-item prop="code" required label="验证码：" :border-bottom="false">
          <u-input v-model="form.code" placeholder="请输入验证码" length="4" />
          <template slot="right">
            <u-button @click="handleGetCode" type="primary" size="mini">{{ tips }}</u-button>
          </template>
        </u-form-item>
      </view>
      <view class="box" v-if="type !== 2">
        <u-form-item prop="age" required label="孩子年龄：" :border-bottom="false">
          <u-input v-model="form.age" placeholder="请输入孩子年龄" />
        </u-form-item>
        <u-form-item prop="location" required label="学籍所在地：" right-icon="arrow-down">
          <u-input
            v-model="form.location"
            placeholder="请选择学籍所在地"
            :disabled="true"
            @click="showSelectlocation = true"
          />
        </u-form-item>
      </view>
    </u-form>

    <u-toast ref="uToast"></u-toast>
    <u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
    <u-select
      v-model="showSelectlocation"
      :default-value="defaultValue"
      :list="options"
      @confirm="handleConfirmSelectBank"
    />
  </view>
</template>

<script>
import { enroll, getCode } from '@/api/modules/apply'
import { showModal } from '@/hooks'
export default {
  props: {
    type: {
      type: Number,
      default: 1,
    },
    labelWidth: {
      type: Number,
      default: 180,
    },
  },
  data() {
    return {
      showSelectlocation: false,
      defaultValue: [0],
      tips: '',
      form: {
        name: '',
        phonenumber: '',
        location: '',
        age: '',
        channelType: this.type,
      },
      options: [{ label: '沪籍' }, { label: '非沪籍' }],
      rules: {
        name: {
          required: true,
          message: '请输入姓名',
          trigger: ['change', 'blur'],
        },
        phonenumber: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            pattern: /^1[3456789]\d{9}$/g,
            transform(value) {
              return String(value)
            },
            message: '手机号格式有误',
          },
        ],
        code: [
          {
            required: true,
            trigger: ['change', 'blur'],
            pattern: /^[0-9]*$/g,
            transform(value) {
              return String(value)
            },
            message: '请输入数字',
          },
        ],
        location: {
          required: true,
          message: '请选择学籍所在地',
          trigger: ['change', 'blur'],
        },
        age: [
          {
            required: true,
            message: '请输入孩子年龄',
            trigger: ['change', 'blur'],
          },
          {
            type: 'number',
            message: '请输入数字',
          },
        ],
      },
      key: 0,
    }
  },
  components: {},
  methods: {
    init() {
      this.$refs.uForm.setRules(this.rules)
    },
    handleConfirmSelectBank(e) {
      const { label } = e[0]
      this.form.location = label
      this.defaultValue = [this.options.findIndex((item) => item.label == label)]
    },
    async handleSubmit() {
      const valid = await this.$refs.uForm.validate()
      if (!valid) {
        return
      }

      try {
        this.$emit('input', true)
        await enroll(this.form)
        showModal({
          title: '温馨提示',
          content: '报名成功，稍后会有工作人员联系您，请注意接听电话。祝您生活愉快。',
          showCancelButton: false,
          confirm: async () => {
            this.form = {
              ...this.form,
              name: '',
              phonenumber: '',
              location: '',
              age: '',
            }
            this.key += 1
            this.$emit('input', false)
            this.$emit('ok')
          },
        })
      } catch (e) {
        this.$emit('input', false)
      }
    },
    codeChange(text) {
      this.tips = text
    },
    async handleGetCode() {
      if (this.$refs.uCode.canGetCode) {
        if (this.form.phonenumber === '') {
          this.$u.toast('请输入手机号')
          return
        }
        uni.showLoading({
          title: '正在获取验证码',
        })
        await getCode({
          phonenumber: this.form.phonenumber,
        })
        setTimeout(() => {
          uni.hideLoading()
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        }, 2000)
      } else {
        this.$u.toast('倒计时结束后再发送')
      }
    },
    end() {
      // this.$u.toast('倒计时结束')
    },
    start() {
      // this.$u.toast('倒计时开始')
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 35rpx;
  margin-bottom: 20rpx;
}
</style>
